<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<!-- 作用:对{{}}进行处理再显示
        1.bug1：现象：
        // Vue.filter('onechange', function(one) {
        //     return one.replace('原来', '现在');
        // });放在new Vue前面才行，放在它后面会报错
        2.三个例子
        3.一个{{}}可以调用多个过滤器，
        4.bug2: Vue.filter('onechange', function(one)里面的onechange要加引号


-->

<body>
    <div id="a">
        <p>{{one |onechange1}}</p>
        <!-- 第一个例子 -->
        <p>{{one |onechange2('第一个参数','第二个参数')}}</p>
        <!-- 第二个例子，传参多个也可以 -->
        <p>{{one |onechange2('第一个参数','第二个参数')|onechange3}}</p>
        <!-- 第三个例子，调用多个过滤器 -->
        <p>{{one |onechange4}}</p>
        <!-- 第四个例子，定义私有过滤器 (局部)-->
    </div>

    <script>
        Vue.filter('onechange1', function(one) {
            return one.replace('原来', '现在');
        });
        Vue.filter('onechange2', function(one, data1, data2) {
            return one + data1 + data2;
        });
        Vue.filter('onechange3', function(one, data1, data2) {
            return one + '.....';
        });
        var a = new Vue({
            el: '#a',
            data: {
                one: '原来的数据'
            },
            filters: {
                onechange4: function(data) {
                    return data + '...';
                }
            }

        })
    </script>
</body>

</html>